<!-- eslint-disable prettier/prettier -->
<script setup lang="ts">
// 1. 已有的功能：返回图标，返回效果，固定定位（组件内部实现）
// 2. 使用组件时候才能确定的功能：标题，右侧文字，点击右侧文字行为（props传入）
// 封装需求❓：支持 title rightText 属性，支持 click-right 事件，返回上一页或默认首页

import { useRouter } from 'vue-router';



const props=defineProps<{
  title?:string,
  rightText?:string
  cb?: () => void // 回调函数
}>()

const emit=defineEmits<{
  (e:'click-right'):void
}>()
// 获取路由实例
const router=useRouter()

const onClickLeft = () => {
  //点击了左边图标
  if (props.cb) {
    // 如果传了cb函数，就执行这个函数
    return props.cb()
  }
  // 有地址就返回上一页，没有地址就返回主页
  if (history.state.back) {
    // 返回上个页面
      router.back()
  }else{
    // 跳转默认首页
    router.push('/')
  }
}
const onClickRight = () => {
  //点击了右边文字
  emit('click-right')
}
</script>

<template>
  <van-nav-bar
    left-arrow
    @click-left="onClickLeft"
    fixed
    :title="title"
    :right-text="rightText"
    @click-right="onClickRight"
  >
  </van-nav-bar>
</template>

<style lang="scss" scoped>
/**
背景：scoped样式私有化，避免样式冲突
原理：组件下元素生成添加一个属性=》data-v-hash值 =》类名会被添加属性选择器限定，避免冲突

== 深度作用选择符 ==
作用：覆盖组件库样式
vue2: /deep/
vue3: ::v-deep()
写法：
1. ::v-deep() 类名 {} => 1个
2. ::v-deep() {  } =》多个
*/
// 使用技巧：
// 情况1:元素生上有=》data-v-hash 属性

// 情况2:元素生上没有=》data-v-hash 属性 => 需要使用深度作用选择符
// ::v-deep() .van-nav-bar__content {
//   background-color: pink;
// }

// ::v-deep() {
//   .van-nav-bar__content {
//     background-color: pink;
//   }
// }

// & 可以外层父拼接类名  =》 .van-nav-bar__arrow {}
::v-deep() {
  .van-nav-bar {
    &__arrow {
      font-size: 18px;
      color: var(--cp-text1);
    }

    &__text {
      font-size: 15px;
    }
  }
}
</style>
